<template>
  <div class="wrap">
    <div class="box">
      <div class="box_l">
        <img v-img-url="bgimg_url" class="img" />
      </div>
      <div class="box_r">
        <div class="title">歡迎登入</div>
        <div class="desc">{{supplier_name || "多商戶商城客服平台"}}</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-position="left"
          label-width="0px"
          size="large"
        >
          <!--用户名-->
          <el-form-item prop="account"
            ><el-input
              @keyup.enter.native="SubmitFunc"
              type="text"
              v-model="ruleForm.account"
              auto-complete="off"
              placeholder="帳號"
            ></el-input
          ></el-form-item>
          <!--密码-->
          <el-form-item prop="checkPass"
            ><el-input
              @keyup.enter.native="SubmitFunc"
              type="password"
              v-model="ruleForm.checkPass"
              auto-complete="off"
              placeholder="密碼"
            ></el-input
          ></el-form-item>
          <!--登录-->
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              style="width: 100%"
              @click.native.prevent="SubmitFunc"
              :loading="logining"
              >登入</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import loginApi from "@/api/login.js";
import bgimg from "@/assets/img/login_bg.png";
import UserApi from "@/api/user.js";
import { useUserStore } from "@/store";
const {
  afterLogin
} = useUserStore();
export default {
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*系统名称*/
      supplier_name: "",
      /*背景图片*/
      bgimg_url: "",
      /*是否正在提交*/
      logining: false,
      /*表单对象*/
      ruleForm: {
        /*用户名*/
        account: "",
        /*密码*/
        checkPass: ""
      },
      /*验证规则*/
      rules: {
        /*用户名*/
        account: [{
          required: true,
          message: "請輸入用戶名稱",
          trigger: "blur"
        }],
        /*密码*/
        checkPass: [{
          required: true,
          message: "請輸入密碼",
          trigger: "blur"
        }]
      },
      /*基础配置*/
      baseData: {}
    };
  },
  created() {
    console.log(import.meta.env);
    this.getData();
  },
  methods: {
    /*获取基础配置*/
    getData() {
      let self = this;
      loginApi.base(true).then(res => {
        self.loading = false;
        const {
          data: {
            serviceBgImg,
            serviceName
          }
        } = res;
        self.supplier_name = serviceName;
        if (serviceBgImg) {
          self.bgimg_url = serviceBgImg;
        } else {
          self.bgimg_url = bgimg;
        }
      }).catch(error => {
        self.loading = false;
      });
    },
    /*登录方法*/
    SubmitFunc(ev) {
      var self = this;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.logining = true;
          var Params = {
            username: this.ruleForm.account,
            password: this.ruleForm.checkPass
          };
          /*调用登录接口*/
          loginApi.login(Params, true).then(async res => {
            this.logining = false;
            if (res.code == 1) {
              await afterLogin(res);
              this.logining = false;
              self.$router.push({
                path: "/service/index"
              });
            } else {
              ElMessage({
                message: "登入失敗",
                type: "error"
              });
            }
          }).catch(error => {
            //接口调用方法统一处理
            this.logining = false;
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// ::v-deep(.el-input){
//   --el-input-border-color: #F4F6FA !important;
//   --el-input-bg-color: #EEEEEE !important;
// }
.wrap {
  /* width: 1200px;
  margin: 0 auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box {
  // min-width: 1200px;
  width: 100%;
  height: 100%;
  background: #ffff;
  display: flex;
  align-items: center;
  .box_l {
    flex: 1;
    height: 100%;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .box_r {
    width: 600px;
    padding: 0 148px;
    box-sizing: border-box;
    text-align: center;
    .title {
      font-size: 25px;
      font-weight: bold;
      color: #333333;
    }
    .desc {
      padding: 12px 0;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      letter-spacing: 2px;
    }
    .el-input {
      border: 1px solid #eeeeee;
      background: #f4f6fa;
      border-radius: 4px;
      overflow: hidden;
    }
    ::v-deep(.el-input__wrapper) {
      box-shadow: none !important;
      background: transparent !important;
      font-size: 12px;
    }
    ::v-deep(.el-form-item.is-error .el-input) {
      border-color: var(--el-color-danger);
    }
  }
}
.login-btn {
  --el-button-font-weight: bold;
}
</style>

